<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定数据</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用">
        <my-input v-model:模型值="输入文本"></my-input>
        <div>{{输入文本}}</div>
        <button @click="this.输入文本=''">清空</button>
    </div>
</body>
<script>
    const 应用 = Vue.createApp({
        data() {
            return {
                输入文本: '',
            }
        },
    })
    const 组件 = {
        props: ['模型值'],
        // emits: ['update:模型值'],
        methods: {
            行为(事件) {
                this.$emit('update:模型值', 事件.target.value)
            },
        },
        template: `
            <div>
                <span>输入框</span>
                <input :value='模型值' @input='行为'>    
            </div>
        `
    }
    应用.component('my-input', 组件)
    应用.mount('#应用')
</script>
</html>